<?php
declare(strict_types=1);

namespace LowCode\Naive;

use LowCode\Naive;
use LowCode\Support\JsBind;
use LowCode\Support\JsExp;
use LowCode\Traits\Props\HasClosable;
use LowCode\Traits\Props\HasDisabled;

/**
 * 组件 - 标签页 TabForm
 * @method static static make(string|int|JsExp $name = null, string|JsBind $tab = null) TabPane组件
 */
class TabPane extends Naive
{
    use HasClosable, HasDisabled;

    protected string $tabKey = "";
    protected string $tabName = "";

    public function __construct(string|int|JsExp $name = null, string|JsBind $tab = null)
    {
        parent::__construct();
        $name!=null&&$this->name($name);
        $tab!=null&&$this->tab($tab);
        $this->tabKey = $name;
        $this->tabName = $tab;
    }

    /**
     * 必填，标签的名称
     * @param string|int|JsExp $name
     * @return $this
     */
    public function name(string|int|JsExp $name): static
    {
        return $this->prop('name', $name);
    }

    /**
     * 标签的 tab string | VNode | () => VNodeChild
     * @param string|JsBind $tab
     * @return $this
     */
    public function tab(string|JsBind $tab): static
    {
        return $this->prop("tab",$tab);
    }

    /**
     * 选择性渲染使用的指令
     * @param string|JsExp $displayDirective   'if' | 'show' | 'show:lazy' if 对应 v-if，show 对应 v-show，使用 show 的时候标签页状态切换后不会被重置，使用 show:lazy 的时候显示效果跟 show 一致，不过内容会进行延迟加载
     * @return $this
     */
    public function displayDirective(string|JsExp $displayDirective = 'if' | 'show' | 'show:lazy'): static
    {
        return $this->prop("display-directive",$displayDirective);
    }

    /**
     * 标签 tab 的 DOM 属性
     * @param array|JsExp $tabProps Object
     * @return $this
     */
    public function tabProps(array|JsExp $tabProps): static
    {
        return $this->prop("tab-props",$tabProps);
    }
}
